<template>
    <!-- 个人列表 -->
    <div class="user-box layout-media-box">
        <el-row>
            <el-col :span="6">
                <div class="tac">
                    <el-menu
                        default-active="1-1"
                        class="el-menu-vertical-demo"
                        active-text-color='#006DB8'
                        text-color='#3C3C3C'
                        @open="handleOpen"
                        @close="handleClose">
                        <el-submenu v-for="(item, index) in userMenuList" :key="index" :index="(index + 1).toString()">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>{{item.parentClass}}</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item  v-for="(ite, idx) in item.childClass"  :key="idx" @click="menuClick(ite.value)" :index ="(index + 1).toString() + '-' + (idx + 1).toString()">{{ite.name}}</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                    </el-menu>
                </div>
            </el-col>
            <el-col :span="18">
                <div class="content-box">
                     <component :is='activeName'></component>
                </div>
            </el-col>
            </el-row>
    </div>
</template>

<script>
import menuList from './menuList'
import personalDetails from './components/personaldetails/personal-details'
import profilePhoto from './components/profilephoto/profile-photo'
import changePassword from './components/changepassword/change-password'
import prescriptionHistory from './components/prescriptionhistory/prescription-history'
import inquiryHistory from './components/inquiryhistory/inquiry-history'
import doctorPesonalDetails from './components/doctorpesonal/doctor-pesonal-details'
import counselingMessage from './components/doctorpesonal/counseling-message'
import setSignature from './components/doctorpesonal/set-signature'
import userList from './components/doctorpesonal/user-list'
export default {
components: {
    personalDetails,
    profilePhoto,
    changePassword,
    prescriptionHistory,
    inquiryHistory,
    doctorPesonalDetails,
    counselingMessage,
    setSignature,
    userList
},
data() {
    return{
        activeName: "",
        userMenuList: []
    }
},
async mounted() {
    let userInfo = await JSON.parse(this.$getStore('adminUserInfo'));
    this.userMenuList = userInfo.type === 'D'? menuList.doctorMenuList : menuList.userMenuList
    this.activeName = this.userMenuList[0].childClass[0].value
},
methods: {
    handleOpen(key, keyPath) {
        //console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
        //console.log(key, keyPath);
    },
    menuClick(e) {
        this.activeName = e;
    }
}
}
</script>

<style lang="scss" scoped>
    .user-box {
        // padding: 0 310px;
    }
    .content-box {
        padding: 30px;
        min-height: 790px;
        background: #FFFFFF;
        margin-left: 20px;
        border-radius: 16px;
        // overflow-y: auto;
    }
    .tac {
        border-radius: 16px;
        overflow: hidden;
    }
    /deep/ .el-submenu__title {
        background: #F7F7F7;
        margin: 6px;
    }
</style>
